import { generateVars } from '@/utils/theme'
import { defineStore } from 'pinia'
import $H from '@/common/js/request.js';

interface ThemeStore {
	primaryColor : string
	minorColor : string
	btnColor : string
	navColor : string
	navBgColor : string
	vars : string
}
export const useThemeStore = defineStore({
	id: 'themeStore',
	state: () : ThemeStore => ({
		primaryColor: '',
		minorColor: '',
		btnColor: 'white',
		navColor: '#000000',
		navBgColor: '#ffffff',
		vars: uni.getStorageSync('theme')
	}),
	actions: {
		async getTheme() {
			const res = await $H.get('index/decorate', {
				id: 5
			}, {
				token: false
			});
			const {
				themeColor1,
				themeColor2,
				buttonColor,
				navigationBarColor,
				topTextColor
			} = JSON.parse(res.data.data)
			this.primaryColor = themeColor1
			this.minorColor = themeColor2
			this.btnColor = buttonColor
			this.navColor = topTextColor === 'white' ? '#ffffff' : '#000000'
			this.navBgColor = navigationBarColor || themeColor1
			this.vars = generateVars(
				{
					primary: themeColor1
				},
				{
					'--color-minor': themeColor2,
					'--color-btn-text': buttonColor
				}
			)
			uni.setStorageSync('theme',this.vars)
		},
		setTheme(color : string) {
			this.primaryColor = color
		}
	}
})